<template>
    <div>
        <!--搜索框-->
        <router-link to="/ShopSearch">
            <div class="search-box">
                <img src="../../assets/img/search.png" class="search-img">
                <span class="search-text light-color small-font-size">搜索</span>
            </div>
        </router-link>
        <!--筛选-->
        <div class="pick-box">
            <div class="pick-chose white-color dark-background">
                <div v-for="(item,index) in pickList" :key="item.id"
                     @click="pickClick(item,index)"
                     :class=" index == pick_index?'active-pick background':''"
                >{{item.name}}
                </div>
            </div>
        </div>
        <!--商品列表-->
        <div class="goods-list-box" :style="GetWindowHeight">
            <div class="shop-box">
                <div class="menu_wrap">
                    <ul>
                        <li
                                v-for="(item, index) in goodsList"
                                :key="index"
                                :class="{ current: index === currentIndex }"
                                @click="clickLeftItem(index)"
                                ref="meneList"
                        >
                            <span>{{ item.title }}</span>
                        </li>
                    </ul>
                </div>
                <div class="shop_wrap">
                    <ul ref="shopListP" class="shop_ul">
                        <li class="shopList" v-for="(item,index) in goodsList" :key="index">
                            <div class="shop_title second-color">
                                <div class="title_t">{{ item.title }}</div>
                                <ul>
                                    <li v-for="(items,index) in item.list" :key="index">
                                        <img :src="items.imgUrl"/>
                                        <div class="goods-content-box">
                                            <div class="goods-info-box">
                                                <div class="main-color big-font-size">{{ items.title }}</div>
                                                <div class="three-color small-font-size">规格：</div>
                                                <div class="three-color small-font-size">重量：</div>
                                                <div class="three-color small-font-size">保存：{{items.warehouse}}</div>
                                                <div class="price-color">￥{{items.price}}</div>
                                            </div>
                                            <!--购物车加减号-->
                                            <div class="shop-cart-box">
                                                <div class="shop-cart-button green-color"
                                                     :class="items.num>0?'':'display-none'"
                                                     @click="minusShopCart"
                                                     :data-parentindex="item.parentIndex"
                                                     :data-index="items.index"
                                                >-
                                                </div>
                                                <input type="number" v-model="items.num"
                                                       class="shop-cart-input main-color"
                                                       :class="items.num>0?'':'display-none'"
                                                       @blur="inputBlurFun(item.parentIndex,items.index,items.num)"
                                                />
                                                <div class="shop-cart-button background"
                                                     @click="addShopCart"
                                                     :data-parentindex="item.parentIndex"
                                                     :data-index="items.index"
                                                >+
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <div class="seize-seat light-color" :style="GetSeizeSeatHeight">-- 没有数据了 --</div>
                    </ul>
                </div>
            </div>
        </div>
        <!--底部按钮操作框-->
        <div class="bottom-box">
            <div class="left-box"></div>
            <div class="bottom-content-box dark-background">
                <div class="bottom-img-box"
                     @click="shopCartShow"
                >
                    <img src="../../assets/img/cart.png" class="cart-img">
                    <div class="number red-background">{{allShopCartCount}}</div>
                </div>
                <div class="bottom-price-box"
                     @click="shopCartShow"
                >
                    <div class="price">￥{{allShopCartPrice}}</div>
                    <div class="des light-color">运费以实际情况为准</div>
                </div>
                <div class="settle-accounts background" @click="shopSetOrderFun">去结算</div>
            </div>
        </div>
        <!--底部购物车弹框-->
        <mt-popup
                v-model="popupVisible"
                position="bottom"
                class="bottom-shop-cart-box"
        >
            <div class="shop-top-box">
                <div>已选</div>
                <div @click="emptyShopCartFun">清空</div>
            </div>
            <div class="shop-cart-type">{{pick_index==0?'总部直供':'门店自采'}}</div>
            <ul class="shop-cart-list">
                <li v-for="(item, index) in shopCartArray"
                    :key="index"
                >
                    <img :src="item.imgUrl" class="cart-img">
                    <div class="shop-cart-content">
                        <div class="main-color big-font-size">{{item.title}}</div>
                        <div class="price-color">￥{{item.price}}</div>
                    </div>
                    <!--购物车加减号-->
                    <div class="shop-cart-box">
                        <div class="shop-cart-button green-color"
                             @click="minusShopCart"
                             :data-parentindex="item.parentIndex"
                             :data-index="item.index"
                        >-
                        </div>
                        <input type="number"
                               v-model="item.num"
                               class="shop-cart-input"
                               @blur="inputBlurFun(item.parentIndex,item.index,item.num)"
                        />
                        <div class="shop-cart-button background"
                             @click="addShopCart"
                             :data-parentindex="item.parentIndex"
                             :data-index="item.index"
                        >+
                        </div>
                    </div>
                </li>
            </ul>
        </mt-popup>
    </div>
</template>

<script>
    import BScroll from "better-scroll";
    import {Toast} from 'mint-ui';

    export default {
        name: "ShopIndex",

        data() {
            return {
                pick_index: 0, //筛选的索引
                pick_id: 1, //筛选的id
                pickList: [{id: 1, name: '直供'}, {id: 2, name: '自采'}],
                scrollY: 0, //右侧列表滚动的y轴
                rightItemTop: [], //所有分类的头部位置
                goodsList: [], //商品数据
                GetWindowHeight: {//右侧列表的高度
                    height: ''
                }, //商品展示区高度
                GetSeizeSeatHeight: { //右侧列表占位符的高度
                    height: ''
                }, //右侧商品-最后一个商品补充高度
                popupVisible: false,//底部购物车弹框是否显示
                shopCartArray: [],//购物车
                allShopCartCount: 0,
                allShopCartPrice: 0,
                isSameWare: true,//是相同的仓库吗
            }
        },
        mounted() {
            this.getlocalStorageFun();
            this.getGlobalData();
            //基本的滚动 就是在 mounted之中调用的
            this.$nextTick(() => {
                this.init();
                // 求出 所有版块的头部位置
                this.rightListTop();
            });
        },
        computed: {
            //左侧的动态选中
            currentIndex() {
                //获取数据
                const {scrollY, rightItemTop} = this;
                // 取出索引 滚动到哪里 然后左侧显示高亮
                return rightItemTop.findIndex((LiTop, index) => {
                    this._leftScroll(index); //调用 左侧的联动
                    return scrollY >= LiTop && scrollY < rightItemTop[index + 1];
                });
            }
        },
        // 生命周期 - 创建完成（可以访问当前this实例）
        created() {
            window.addEventListener('resize', this.getHeight) // 注册监听器
            this.getHeight() // 页面创建时先调用一次
        },
        // 生命周期 - 销毁完成
        destroyed() {
            window.removeEventListener('resize', this.getHeight)
        },
        methods: {

            //去结算
            shopSetOrderFun() {
                console.log(this.shopCartArray)
                this.$router.push('/ShopSetOrder')
            },
            //input失焦时间（商品数量填写失焦）
            inputBlurFun(parentIndex, index, num) {
                //可以input修改数量，证明已经加入购物车，不需要再去判断是否在一个仓库里，减法就可以实现失焦时间的数据计算
                this.$store.commit('minusShopCartGlobalFun', {parentIndex, index, num})
                this.$store.commit('allShopCartPrice')
                this.getGlobalData();
            },

            //从全局变量中拿基础数据
            getGlobalData() {
                var state = this.$store.state
                this.pick_index = state.purchaseType
                var $thisShopCart = this.pick_index == 0 ? state.shopCartObj.headquarters : state.shopCartObj.selfMining;//获取加购的是哪个采购方式--即确认供货商
                this.goodsList = state.goodsList;//商品列表
                this.shopCartArray = $thisShopCart.shopCartArray;//购物车
                this.allShopCartCount = $thisShopCart.allShopCartCount;//购物车商品总数
                this.allShopCartPrice = $thisShopCart.allShopCartPrice;//购物车商品总金额
                this.isSameWare = $thisShopCart.isSameWare;//是相同的仓库吗
                if (!this.isSameWare) {
                    Toast('常温仓和冷冻仓不可以同时加购！');
                }
                var data = {
                    "shopCartObj": state.shopCartObj,
                    "goodsList": state.goodsList,
                    "purchaseType": this.pick_index,
                }
                localStorage.setItem('localData', JSON.stringify(data));
            },
            //获取缓存数据，并赋值
            getlocalStorageFun() {
                var localData = JSON.parse(localStorage.getItem('localData'));
                if (localData) {
                    this.$store.state.shopCartObj = localData.shopCartObj
                    this.$store.state.goodsList = localData.goodsList
                    this.$store.state.purchaseType = localData.purchaseType
                }
            },
            //加-购物
            addShopCart(e) {
                let index = e.srcElement.dataset.index;
                let parentIndex = e.srcElement.dataset.parentindex;
                this.$store.commit('AddShopCartGlobalFun', {parentIndex, index})
                this.$store.commit('allShopCartPrice')
                this.getGlobalData();
            },
            //减-购物车
            minusShopCart(e) {
                let index = e.srcElement.dataset.index;
                let parentIndex = e.srcElement.dataset.parentindex;
                this.$store.commit('minusShopCartGlobalFun', {parentIndex, index})
                this.$store.commit('allShopCartPrice')
                this.getGlobalData();
                if (this.shopCartArray.length == 0) {
                    this.popupVisible = false
                }
            },

            //显示/隐藏购物车
            shopCartShow() {
                var shopCartLen = this.shopCartArray.length;
                if (shopCartLen == 0) { //购物车为空
                    Toast('您还没有加购哟！');
                    return
                }
                this.popupVisible = true
            },
            //清空购物车
            emptyShopCartFun() {
                this.popupVisible = false
                this.$store.commit('emptyShopCartFun')
                this.getGlobalData();
            },
            getHeight() {
                // 获取浏览器高度，减去顶部搜索栏和导航栏的值 55 + 50（可动态获取）,再减去底部高度值60
                this.GetWindowHeight.height = window.innerHeight - 55 - 50 - 70 + 'px'
                //右侧商品列表高度 - 一个商品高度
                this.GetSeizeSeatHeight.height = window.innerHeight - 55 - 50 - 70 - 135 + 'px'
            },
            //选择类型
            pickClick: function (item, index) {
                this.pick_index = index;
                this.pick_id = item.id;
                var state = this.$store.state;
                state.purchaseType = index   //0:总部直供  1：门店自采
                this.getGlobalData()
            },
            init() {
                //左侧
                this.leftScroll = new BScroll(".menu_wrap", {
                    scrollY: true,
                    click: true
                });
                // 右侧
                this.rightScroll = new BScroll(".shop_wrap", {
                    scrollY: true,
                    click: true,
                    probeType: 3 //滚动时候 监听
                });
                //监听右侧的滚动事件
                this.rightScroll.on("scrollEnd", pos => {
                    //scroll  scrollEnd滚动结束的时候 监听
                    this.scrollY = Math.abs(pos.y); //pos.y 的绝对值
                });
            },
            // 获取右侧的 每一个模块的距离顶部的距离
            rightListTop() {
                const tempArr = [];
                let top = 0; //记录高度
                tempArr.push(top);
                // 遍历 对应的ul 中的li 取出每一个高度
                let allList = this.$refs.shopListP.querySelectorAll(".shopList");
                allList.forEach(item => {
                    top += item.clientHeight;
                    // console.log("top", top);
                    tempArr.push(top);
                });
                this.rightItemTop = tempArr;
            },
            //点击切换
            clickLeftItem(index) {
                // console.log("index", this.rightItemTop[index]);
                this.scrollY = this.rightItemTop[index];
                this.rightScroll.scrollTo(0, -this.scrollY, 1200);
            },
            //右侧滚动时候 实现左侧的联动
            _leftScroll(index) {
                let meneList = this.$refs.meneList;
                // console.log("左侧", index, meneList);
                let el = meneList[index];
                this.leftScroll.scrollToElement(el, 300, 0, -100);
            }
        },
    }
</script>

<style lang="scss" scoped>

    .search-box {
        width: 70%;
        height: 35px;
        background: #f8f7fc;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 6px;
        margin: 20px auto 0 auto;
        .search-img {
            width: 16px;
            height: 16px;
        }
        .search-text {
            font-size: 14px;
            padding: 0 10px;
        }
    }

    .pick-box {
        width: 100%;
        height: 26px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-size: 13px;
        margin: 14px 0 10px 0;
        .pick-chose {
            width: 90px;
            padding: 2px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            border-radius: 6px;
            margin-right: 20px;
        }
        .pick-chose div {
            width: 45px;
            height: 22px;
            line-height: 22px;
            border-radius: 6px;
        }
        .active-pick {
            width: 60px;
            color: #fff;
        }
    }

    /*商品列表*/
    .goods-list-box {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 500px;
        overflow-y: auto;
        .shop-box {
            width: 100%;
            height: 100%;
            display: flex;
            .menu_wrap {
                width: 80px;
                height: 100%;
                font-size: 0.8em;
                flex-wrap: wrap;
                background: #f5f6fa;
                & > ul > li {
                    width: calc(100% - 20px);
                    height: 50px;
                    padding: 0 10px;
                    span {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 100%;
                        height: 100%;
                    }
                }
                .current {
                    position: relative;
                    background: #fff;
                    height: 40px;
                    border-top: 5px solid #f5f6fa;
                    border-bottom: 5px solid #f5f6fa;
                }
            }
            .shop_wrap {
                width: calc(100% - 100px);
                height: 100%;
                overflow-x: hidden;
                overflow-y: scroll;
                padding: 0 10px;
                .shop_ul {
                    margin-bottom: 80px;
                }
                .shop_title {
                    & > .title_t {
                        height: 38px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        font-size: 14px;
                        padding-left: 5px;
                    }
                    & > ul {
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: flex-start;
                    }
                    & > ul > li {
                        width: 100%;
                        height: 100px;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        position: relative;
                        img {
                            width: 83px;
                            height: 85px;
                            border-radius: 12px;
                            margin-right: 10px;
                        }
                        .goods-content-box {
                            display: flex;
                            flex-direction: column;
                            width: calc(100% - 95px);
                            text-align: left;
                        }
                        .goods-info-box {
                            padding-left: 5px;
                        }
                    }
                }
                .seize-seat {
                    width: 100%;
                    height: 500px;
                    line-height: 80px;
                    font-size: 12px;
                }
            }
        }
    }

    /*底部*/
    .bottom-box {
        width: 100%;
        height: 70px;
        display: flex;
        position: relative;
        .left-box {
            width: 80px;
            height: 100%;
            background: #f5f6fa;
        }
        .bottom-content-box {
            width: calc(100% - 20px);
            height: 50px;
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 2021;
            border-radius: 8px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            color: #fff;
            .settle-accounts {
                width: 82px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                border-radius: 8px;
                margin-left: auto;
                margin-right: 6px;
                font-size: 15px;
                color: #fff;
            }
            .bottom-img-box {
                width: 25px;
                height: 25px;
                position: relative;
                margin: 0 28px 0 10px;
                .number {
                    min-width: 10px;
                    min-height: 14px;
                    text-align: center;
                    font-size: 12px;
                    color: #fff;
                    border-radius: 8px;
                    position: absolute;
                    top: -6px;
                    right: -10px;
                    padding: 1px 3px 0 3px;
                }
            }
            .bottom-price-box {
                display: flex;
                flex-direction: column;
                .price {
                    font-size: 18px;
                    margin-right: auto;
                }
                .des {
                    font-size: 10px;
                    padding-left: 3px;
                }
            }

        }
    }

    /*底部购物车弹框*/
    .bottom-shop-cart-box {
        width: calc(100% - 40px);
        min-height: 80px;
        max-height: 380px;
        padding: 0 20px 70px 20px;
        .shop-top-box {
            line-height: 40px;
            display: flex;
            justify-content: space-between;
            letter-spacing: 1px;
            font-size: 15px;
        }
        .shop-cart-type {
            width: 100%;
            line-height: 35px;
            text-align: left;
            font-size: 14px;
        }
        .shop-cart-list {
            width: 100%;
            max-height: 305px;
            overflow-y: auto;
            margin-bottom: 10px;
            li {
                width: 100%;
                display: flex;
                padding: 5px 0;
                position: relative;
                .cart-img {
                    width: 50px;
                    height: 50px;
                    border-radius: 12px;
                }
                .shop-cart-content {
                    padding-left: 10px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    text-align: left;
                }
                .goods-name {
                    font-size: 13px;
                    color: #5e607c;
                }
            }

        }
    }
</style>